<template>
  <div class="filmorder">
    <!-- 加载中 -->
    <van-popup v-model="show">
      <van-button loading type="info" loading-text="加载中..." />
    </van-popup>

    <!-- 头部标题 -->
    <div class="filmorder-top fz20">
      <van-sticky>
        <van-nav-bar title="确认订单" @click-left="back" left-arrow>
          <!-- 右侧倒计时 -->
          <!-- <template #right>
            <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
            1111
          </template> -->
        </van-nav-bar>
      </van-sticky>
    </div>
    <!-- 中间部分 -->
    <div class="filmorder-middle">
      <!-- 通讯信息 -->
      <div class="filmorder-middle-phone fz20">
        手机号：{{ orderList.mobile }}
      </div>
      <!-- 订票区 -->
      <div class="filmorder-middle-order">
        <div class="filmorder-middle-order-info">
          <van-card
            :num="orderList.goodsInfo[0].goodsCount"
            :price="orderList.goodsInfo[0].price/100"
            :desc="orderList.cinemaInfo.name"
            :title="orderList.seatExtInfo.filmName"
            :thumb="orderList.seatExtInfo.filmLogo"
          />
        </div>
        <div class="filmorder-middle-order-price">
            <van-cell title="商品金额" :value="orderList.goodsInfo[0].price/100+'元'" />
        </div>
      </div>
      <!--券，余额，发票  -->
      <div>
        <van-cell title="卖座券" icon="shop-o">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="arrow" />
          </template>
        </van-cell>
        <van-cell title="余额" icon="shop-o">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="arrow" />
          </template>
        </van-cell>
        <van-cell title="发票" icon="shop-o">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="arrow" />
          </template>
        </van-cell>
      </div>
      <!-- 注意事项 -->
    </div>

    <!-- 底部付款 -->
    <div class="filmorder-bottom">
      <van-submit-bar
        :price="orderList.goodsInfo[0].price"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "filmOrder",
  data() {
    return {
      orderList: {
        cinemaInfo: {
          address:
            "北京市延庆区妫水北街39号1幢H座首层（金锣湾商业中心）沃尔玛旁",
          cinemaId: 4834,
          gps: "115.982954,40.467777",
          name: "大地影院（延庆金锣湾店）",
          tel: "010-60165114",
          createdAt: 1629673555,
          endPayTime: 1629674455,
        },
        goodsInfo: [
          {
            codeInfo: null,
            confirmCode: "",
            endDate: 1629779880,
            eticketExtInfo: null,
            goodsCount: 1,
            goodsId: 41482,
            goodsName: "2D订座票",
            goodsType: 2,
            orderCode: "",
            otherConfirmCode: "",
            price: 4500,
          },
        ],
        seatExtInfo: {
          fee: 200,
          filmId: 5610,
          filmLogo:
            "https://pic.maizuo.com/usr/movie/fcb5e9eb502bf2c296541f11f0d4b96b.jpg@1024h_768w_50Q",
          filmName: "怒火·重案",
          getType: 0,
          hallName: "3号厅(4K)",
          price: 4300,
          scheduleId: 148129991,
          seats: "5:10",
          sectionId: "1",
          sectionName: "",
          ticketType: 1,
          watchTime: 1629772200,
          startDate: 1629772200,
          takeTicketCode: "",
          takeTicketMsg: "",
          takeTicketType: 0,
          thirdOrderId: "",
        },
        isComplete: 0,
        mobile: "18667184527",
        orderId: "202108232052070554",
        orderStatus: 0,
        payOrderId: "",
        sku: {
          count: 1,
          imgUrl:
            "https://pic.maizuo.com/usr/movie/fcb5e9eb502bf2c296541f11f0d4b96b.jpg@1024h_768w_50Q",
          isVirtualProduct: 1,
          masterName: "",
          price: 4500,
          productId: 161437483,
          productName: "订座票",
          skuId: 161437053,
          slaveName: "",
        },
        totalPrice: 4500,
        userId: 31618727,
      },
      show: false,
      //   总价
      totalPrice: [],
      phone: [],
    };
  },
  // 暂时使用假数据
  created() {
    // let that = this;
    // //  var url="https://m.maizuo.com/gateway?orderId=202108226692201635&k=8097476";
    // this.axios
    //   .get(process.env.VUE_APP_BASE_URL, {
    //     headers: {
    //       "X-Host": "mall.ticket.order.detail",
    //       "X-Token":that.token,
    //     },
    //     params: {
    //       orderId: 202108232052070554,
    //       k: 8097476,
    //     },
    //   })
    //   .then(function(res) {
    //     // 倒计时  createdAt: 1629630272，endPayTime: 1629631172
    //     that.totalPrice = res.data.data.totalPrice;
    //     that.phone = res.data.data.cinemaInfo.tel;
    //     that.goodsInfo=res.data.data.goodsInfo
    //     console.log(res);
    //   })
    //   .catch(function(error) {
    //     console.log(error);
    //   });
  },
  methods: {
    back() {
      this.$router.back();
    },
    onsubmit(){

    }
  },
};
</script>

<style lang="scss" scoped>
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ff5f16;
}
.block {
  display: inline-block;
  width: 22px;
  color: #ff5f16;
  font-size: 12px;
  text-align: center;
  background-color: #ffffff;
}
.filmorder {
  display: flex;
  flex-direction: column;
  background-color: rgb(244, 244, 244);
  &-top {
    height: 46px;
    flex-shrink: 0;
  }
  &-middle {
    flex-grow: 1;
    overflow: auto;
    &-phone {
      height: 75px;
      padding: 20px;
      background-color: #fff;
      border-bottom: 1px solid rgb(230, 230, 230);
    }
    &-order {
      background-color: #fff;
        margin: 5px 0;
      &-info {
        margin: 10px 0;
        background-color: #fff;
      }
      &-price {
      }
    }
  }
  // &-bottom {
  //   flex-shrink: 0;
  // border-top: 1px solid rgb(240,240,240);
  // }
}
</style>
